//设置好配置文件后，更改js后不用每次都重新打包指定文件，而只需要在控制台键入webpack即可

const path = require('path');

//导入在内存中生成的html插件
//只要是插件，都一定要放到plugins节点中去
const htmlWebpackPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

//新建的配置文件
//指定一下入口和出口文件
//配置文件，起始是一个js文件，通过node的操作，向外暴漏一个配置文件
module.exports = {
    //Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,
    devtool: "sourcemap",

    //配置文件中需要手动指定入口和出口
    entry:path.join(__dirname,'./src/main.js'), //入口，使用webpack打包那个文件
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'//指定文件名称
    },//输出文件相关的配置,输出到那个文件

    //配置插件的节点
    plugins: [
        new htmlWebpackPlugin({
            //创建一个在内存中生成html页面的插件
            //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            template: path.join(__dirname,'./src/index.html'),
            filename: "index.html"    //指定生成的页面名称
        }),
        // Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,配置
        new VueLoaderPlugin()
    ],

    //所有的第三方模块加载器
    module: {
        rules: [
            //匹配以.css结尾的文件
            //检测到.css文件，用后面两个loader处理
            {test: /\.css$/, use:['style-loader','css-loader']},
            //url-loader  检测到图片，交给url-loader处理
            {
                //limit 数值若大于图片的大小byte,则图片的路径转为base64位编码，若小于则为正常的名字，
                //url-loader && file-loader是将图片放在根目录下(内存，避免二次请求)，若多张图片的名字一样，则会显示第一张，---》
                //将图片的名字重新编辑拼接16位的hash值用-连接，则每张图片都各不相同
                //[name].[ext] ----》原来的名字及后缀
                test: /\.(png|jpg|jpeg|gif)$/,use:'url-loader?limit=100000&name=[hash:16]-[name].[ext]',
            },
            //对bootstrap中的字体文件进行处理
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'
            },
            //babel-loader 对es6高级语法的处理,除了node_modules中的js，其他的用babel-loader来处理
            {
                test:/\.js$/,use:'babel-loader', exclude: /node_modules/
            },
            //处理.vue结尾的文件  vue-loader
            {
                test: /\.vue$/,use:"vue-loader"
            }
        ]
    },
    resolve: {
        //修改导入vue包的时候的导入路径
        alias: {
            // "vue$":"vue/dist/vue.esm.js"
        }
    }
};

//设置好webpack的配置文件后，在控制台键入webpack
//1.首先webpack发现，我们并没有通过命令的形式来指定入口和出口文件
//2.webpack就会去项目的根目录中查找一个叫做'webpack.congig.js'的配置文件
//3.当找到这个配置文件后，webpack会解析执行这个配置文件，就会得到配置文件中的导出的配置对象
//4.当webpack拿到配置对象后，就拿到了配置对象中的指定的入口和出口，然后进行打包构建
